| uniapp项目webview页面给小程序传参 postMessage 接收不到参数 | 您所在的位置：网站首页 › uniapp webview vue 通信 › uniapp项目webview页面给小程序传参 postMessage 接收不到参数 |
uniapp项目webview页面给小程序传参 postMessage 接收不到参数
|
一、项目背景：
使用uniapp框架开发的小程序，因业务需求，要在小程序的webview里嵌入第三方的h5页面。当用户点击小程序右上角的三个点进行分享的时候，要将h5页面传过来的参数作为分享数据。 二、小程序端先来了解一下小程序的 web-view 组件： web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。小程序的 web-view 页面和本身的内容不能共存，如果想在页面上悬浮内容，可以使用 uni.showToast()、uni.showModal()来进行内容提示。官方文档：https://uniapp.dcloud.io/component/web-view?id=web-view 属性名类型说明srcStringwebview 指向网页的链接@messageEventHandler网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。分享的时候，当点击小程序右上角的三个点、发送给朋友，会触发message事件的回调。
用微信开发者工具开发的时候，可以先用本地服务的路径来进行调试。 使用原生小程序语言开发，.wxml文件内容如下： .js文件内容如下： Page({ data:{ shareData:"" }, getMessage(e){ console.log("getMessage:e>>>",e) this.shareData = e.detail.data[e.detail.data.length - 1]; }, onShareAppMessage(){ let path=`/pages/webView/webView?link=${this.shareData.url}` return{ title:this.shareData.title, path, imageUrl:this.shareData.imgUrl } } }) 2.2 uniapp小程序开发使用uniapp框架开发的小程序，页面代码如下： export default { data() { return { src: "http://localhost:8080/#/webview", sharePath: "", //二次转发的路径 shareTitle: "", //二次转发的标题 shareImgUrl: "" //二次转发的缩略图 }; }, async onLoad(options) { this.src = decodeURIComponent(options.link); }, methods: { getMessage(e) { console.log("getMessage:data :>> ", e.detail.data); let data = e.detail.data[e.detail.data.length - 1]; this.shareTitle = data.shareTitle; this.shareImgUrl = data.shareImgUrl; this.sharePath = `${data.page}?link=${data.shareUrl}&invited_uid=${this.uid}&dl_id=${this.dl_id}`; }, //小程序分享 onShareAppMessage() { console.log("分享的链接 :>> ", this.sharePath); return { title: this.shareTitle, imageUrl: this.shareImgUrl, path: this.sharePath }; } } }; 三、h5端h5页面引入微信小程序的SDK，或者uni的SDK。通过调用 postMessage 方法将数据传递给小程序端。 wx.miniProgram.postMessage()，网页向应用发送消息，在小程序 web-view 的 message 事件回调 event.detail.data 中接收消息。传递的消息信息，必须写在 data 对象中。event.detail.data 中的数据，以数组的形式接收每次 post 的消息，通过 e.detail.data[e.detail.data.length - 1] 获取最后一次的数据。 wx.miniProgram.postMessage({ data: { page: "/pages/webView/webView", url: "https://www.baidu.com", }, });
引入微信小程序的SDK，就可以调用 wx.miniProgram.postMessage() 方法进行数据传递。 DOCTYPE html> webview 分享页面给好友 document.getElementById("app").onclick=()=>{ console.log('clickHandle :>> ', ); wx.miniProgram.getEnv(function (res) { console.log("当前环境：" + JSON.stringify(res)); }); wx.miniProgram.postMessage({ data: { page: "/pages/webView/webView", url: "https://www.baidu.com", }, }); } 3.2 使用uniapp的SDK如果是使用 uniapp 开发的h5，想使用 uni 的方法，需要引入 uni.webview.js 文件。但是要注意网上下载的 uni.webview.js 文件，里面注册的就是 uni 对象，会被 uniapp 项目自带的 uni 对象覆盖。需要手动改源码，全字匹配 uni 后随便改成另外的名字。 DOCTYPE html> webview 分享页面给好友 document.getElementById("app").onclick=()=>{ console.log('clickHandle :>> ', ); webUni.getEnv(function(res) { console.log("当前环境：" + JSON.stringify(res)); }); webUni.postMessage({ data: { page: "/pages/webView/webView", url: "https://www.baidu.com", }, }); } 四、总结使用 postMessage() 接收不到参数，检查以下几点： postMessage() 里，数据要放在 data 对象里。注意触发的时机，只有 后退、组件销毁、分享 的时候，才会触发 web-view 的message事件。使用 uni.postMessage() 方法，要改源码里的 uni 对象。 |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |